<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数智作业后台管理系统 - 找回密码</title>
    <link rel="icon" href="/assets/ico/7favicon.png" type="image/png">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <script src="/js/api.js"></script>
    <style>
        .gradient-bg {
            background: linear-gradient(90deg, #4f46e5 0%, #3b82f6 100%);
        }
        .login-card {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(209, 213, 219, 0.3);
        }
        .input-group {
            position: relative;
        }
        .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #6b7280;
        }
        body {
            background-image: url('https://source.unsplash.com/random/1920x1080/?gradient');
            background-size: cover;
            background-position: center;
        }
        .animate-fade-in {
            animation: fadeIn 0.5s ease-in;
        }
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .step {
            transition: all 0.3s ease;
        }
        .step.hidden {
            display: none;
        }
    </style>
</head>
<body class="bg-gray-100 flex justify-center items-center h-screen">
<div class="bg-white bg-opacity-95 p-10 rounded-xl login-card w-full max-w-md animate-fade-in">
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-transparent bg-clip-text gradient-bg inline-block">找回密码</h1>
        <p class="text-gray-500 mt-2">通过邮箱验证码重置您的密码</p>
    </div>
    
    <!-- 步骤指示器 -->
    <div class="flex mb-8 justify-between">
        <div class="step-indicator flex-1 text-center">
            <div id="step1-indicator" class="w-8 h-8 rounded-full bg-blue-500 text-white mx-auto flex items-center justify-center font-bold mb-1">1</div>
            <span class="text-xs text-gray-500">验证身份</span>
        </div>
        <div class="h-0.5 bg-gray-300 flex-1 mt-4"></div>
        <div class="step-indicator flex-1 text-center">
            <div id="step2-indicator" class="w-8 h-8 rounded-full bg-gray-300 text-gray-600 mx-auto flex items-center justify-center font-bold mb-1">2</div>
            <span class="text-xs text-gray-500">设置新密码</span>
        </div>
        <div class="h-0.5 bg-gray-300 flex-1 mt-4"></div>
        <div class="step-indicator flex-1 text-center">
            <div id="step3-indicator" class="w-8 h-8 rounded-full bg-gray-300 text-gray-600 mx-auto flex items-center justify-center font-bold mb-1">3</div>
            <span class="text-xs text-gray-500">完成</span>
        </div>
    </div>
    
    <!-- 第一步：验证身份 -->
    <div id="step1" class="step">
        <div class="mb-4">
            <label for="email" class="block text-gray-700 font-medium mb-2">邮箱</label>
            <input type="email" id="email" name="email" 
                   class="border border-gray-300 p-3 w-full rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
                   placeholder="请输入您的注册邮箱" required>
        </div>
        
        <div class="mb-6">
            <label for="verificationCode" class="block text-gray-700 font-medium mb-2">验证码</label>
            <div class="flex space-x-2">
                <input type="text" id="verificationCode" name="verificationCode" 
                       class="border border-gray-300 p-3 flex-1 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
                       placeholder="请输入验证码" required>
                <button id="sendCodeBtn" type="button" 
                        class="px-4 py-3 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    获取验证码
                </button>
            </div>
        </div>
        
        <button id="verifyBtn" type="button" 
                class="w-full py-3 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-indigo-700 transition duration-300 shadow-md hover:shadow-lg transform hover:-translate-y-0.5">
            下一步
        </button>
    </div>
    
    <!-- 第二步：设置新密码 -->
    <div id="step2" class="step hidden">
        <div class="mb-6">
            <label for="newPassword" class="block text-gray-700 font-medium mb-2">新密码</label>
            <div class="input-group">
                <input type="password" id="newPassword" name="newPassword" 
                       class="border border-gray-300 p-3 w-full rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
                       placeholder="请输入新密码" required>
                <span class="toggle-password" id="toggleNewPassword">
                    <i class="fas fa-eye-slash"></i>
                </span>
            </div>
            <div class="mt-1">
                <div class="password-strength-meter flex h-1 mt-1 mb-2">
                    <div class="strength-segment bg-gray-300 flex-1 mr-1 rounded-full"></div>
                    <div class="strength-segment bg-gray-300 flex-1 mr-1 rounded-full"></div>
                    <div class="strength-segment bg-gray-300 flex-1 mr-1 rounded-full"></div>
                    <div class="strength-segment bg-gray-300 flex-1 rounded-full"></div>
                </div>
                <p class="text-xs text-gray-500 password-strength-text">密码强度: 弱</p>
            </div>
        </div>
        
        <div class="mb-6">
            <label for="confirmPassword" class="block text-gray-700 font-medium mb-2">确认密码</label>
            <div class="input-group">
                <input type="password" id="confirmPassword" name="confirmPassword" 
                       class="border border-gray-300 p-3 w-full rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-200"
                       placeholder="请再次输入新密码" required>
                <span class="toggle-password" id="toggleConfirmPassword">
                    <i class="fas fa-eye-slash"></i>
                </span>
            </div>
        </div>
        
        <div class="flex space-x-3">
            <button id="backToStep1" type="button" 
                    class="flex-1 py-3 px-4 bg-gray-200 text-gray-800 font-medium rounded-lg hover:bg-gray-300 transition duration-200">
                返回
            </button>
            <button id="resetPasswordBtn" type="button" 
                    class="flex-1 py-3 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-indigo-700 transition duration-300 shadow-md hover:shadow-lg">
                重置密码
            </button>
        </div>
    </div>
    
    <!-- 第三步：完成 -->
    <div id="step3" class="step hidden text-center">
        <div class="mb-6">
            <div class="w-20 h-20 rounded-full bg-green-100 mx-auto flex items-center justify-center mb-4">
                <i class="fas fa-check text-green-500 text-3xl"></i>
            </div>
            <h3 class="text-xl font-bold text-gray-800 mb-2">密码重置成功</h3>
            <p class="text-gray-600 mb-6">您的密码已经成功重置，请使用新密码登录。</p>
        </div>
        
        <a href="login.html" 
           class="inline-block w-full py-3 px-4 bg-gradient-to-r from-blue-600 to-indigo-600 text-white font-medium rounded-lg hover:from-blue-700 hover:to-indigo-700 transition duration-300 shadow-md hover:shadow-lg text-center">
            返回登录
        </a>
    </div>
    
    <!-- 错误提示 -->
    <div id="errorMsg" class="hidden mt-4">
        <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded-md animate-fade-in">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <i class="fas fa-exclamation-circle text-red-500 text-xl"></i>
                </div>
                <div class="ml-3">
                    <p class="text-sm text-red-700" id="errorMsgText">错误提示信息</p>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 回到登录页链接 -->
    <div class="text-center mt-6">
        <a href="login.html" class="text-sm text-blue-600 hover:text-blue-800 transition duration-200">
            返回登录页面
        </a>
    </div>
</div>

<script>
    // 页面元素
    const step1 = document.getElementById('step1');
    const step2 = document.getElementById('step2');
    const step3 = document.getElementById('step3');
    const step1Indicator = document.getElementById('step1-indicator');
    const step2Indicator = document.getElementById('step2-indicator');
    const step3Indicator = document.getElementById('step3-indicator');
    
    const emailInput = document.getElementById('email');
    const verificationCodeInput = document.getElementById('verificationCode');
    const newPasswordInput = document.getElementById('newPassword');
    const confirmPasswordInput = document.getElementById('confirmPassword');
    
    const sendCodeBtn = document.getElementById('sendCodeBtn');
    const verifyBtn = document.getElementById('verifyBtn');
    const backToStep1 = document.getElementById('backToStep1');
    const resetPasswordBtn = document.getElementById('resetPasswordBtn');
    
    const errorMsg = document.getElementById('errorMsg');
    const errorMsgText = document.getElementById('errorMsgText');
    
    const toggleNewPassword = document.getElementById('toggleNewPassword');
    const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
    
    let countdown = 0;
    let countdownInterval;
    let verifiedEmail = '';
    
    // 发送验证码按钮点击事件
    sendCodeBtn.addEventListener('click', async () => {
        const email = emailInput.value.trim();
        
        // 验证邮箱格式
        if (!isValidEmail(email)) {
            showError('请输入有效的邮箱地址');
            return;
        }
        
        // 禁用按钮并开始倒计时
        sendCodeBtn.disabled = true;
        sendCodeBtn.classList.add('bg-gray-400');
        sendCodeBtn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
        
        try {
            // 调用发送验证码API
            const response = await fetch('/api/forgot-password/send-code', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ email })
            });
            
            const data = await response.json();
            
            if (response.ok) {
                // 开始倒计时
                countdown = 60;
                startCountdown();
                
                // 隐藏错误信息
                errorMsg.classList.add('hidden');
            } else {
                showError(data.message || '发送验证码失败，请稍后重试');
                resetSendCodeButton();
            }
        } catch (error) {
            console.error('发送验证码出错:', error);
            showError('网络错误，请检查您的网络连接');
            resetSendCodeButton();
        }
    });
    
    // 验证按钮点击事件
    verifyBtn.addEventListener('click', async () => {
        const email = emailInput.value.trim();
        const code = verificationCodeInput.value.trim();
        
        // 验证邮箱和验证码
        if (!isValidEmail(email)) {
            showError('请输入有效的邮箱地址');
            return;
        }
        
        if (!code) {
            showError('请输入验证码');
            return;
        }
        
        try {
            // 禁用按钮
            verifyBtn.disabled = true;
            verifyBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>验证中...';
            
            // 调用验证码验证API
            const response = await fetch('/api/forgot-password/verify-code', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ email, code })
            });
            
            const data = await response.json();
            
            if (response.ok && data.success) {
                // 存储已验证的邮箱
                verifiedEmail = email;
                
                // 跳转到第二步
                goToStep(2);
                
                // 隐藏错误信息
                errorMsg.classList.add('hidden');
            } else {
                showError(data.message || '验证码错误或已过期');
                verifyBtn.disabled = false;
                verifyBtn.innerHTML = '下一步';
            }
        } catch (error) {
            console.error('验证码验证出错:', error);
            showError('网络错误，请检查您的网络连接');
            verifyBtn.disabled = false;
            verifyBtn.innerHTML = '下一步';
        }
    });
    
    // 返回按钮点击事件
    backToStep1.addEventListener('click', () => {
        goToStep(1);
    });
    
    // 重置密码按钮点击事件
    resetPasswordBtn.addEventListener('click', async () => {
        const newPassword = newPasswordInput.value;
        const confirmPassword = confirmPasswordInput.value;
        
        // 验证密码
        if (!newPassword) {
            showError('请输入新密码');
            return;
        }
        
        if (newPassword.length < 6) {
            showError('密码长度不能少于6个字符');
            return;
        }
        
        if (newPassword !== confirmPassword) {
            showError('两次输入的密码不一致');
            return;
        }
        
        try {
            // 禁用按钮
            resetPasswordBtn.disabled = true;
            resetPasswordBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>重置中...';
            
            // 调用重置密码API
            const response = await fetch('/api/forgot-password/reset', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    email: verifiedEmail,
                    password: newPassword
                })
            });
            
            const data = await response.json();
            
            if (response.ok && data.success) {
                // 跳转到第三步
                goToStep(3);
                
                // 隐藏错误信息
                errorMsg.classList.add('hidden');
            } else {
                showError(data.message || '重置密码失败，请稍后重试');
                resetPasswordBtn.disabled = false;
                resetPasswordBtn.innerHTML = '重置密码';
            }
        } catch (error) {
            console.error('重置密码出错:', error);
            showError('网络错误，请检查您的网络连接');
            resetPasswordBtn.disabled = false;
            resetPasswordBtn.innerHTML = '重置密码';
        }
    });
    
    // 密码可见性切换
    toggleNewPassword.addEventListener('click', function() {
        togglePasswordVisibility(newPasswordInput, toggleNewPassword);
    });
    
    toggleConfirmPassword.addEventListener('click', function() {
        togglePasswordVisibility(confirmPasswordInput, toggleConfirmPassword);
    });
    
    // 密码强度检测
    newPasswordInput.addEventListener('input', checkPasswordStrength);
    
    // 辅助函数
    function isValidEmail(email) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return emailRegex.test(email);
    }
    
    function showError(message) {
        errorMsgText.textContent = message;
        errorMsg.classList.remove('hidden');
    }
    
    function resetSendCodeButton() {
        sendCodeBtn.disabled = false;
        sendCodeBtn.classList.remove('bg-gray-400');
        sendCodeBtn.classList.add('bg-blue-600', 'hover:bg-blue-700');
        sendCodeBtn.textContent = '获取验证码';
        clearInterval(countdownInterval);
    }
    
    function startCountdown() {
        sendCodeBtn.textContent = `${countdown}秒后重新获取`;
        
        countdownInterval = setInterval(() => {
            countdown--;
            sendCodeBtn.textContent = `${countdown}秒后重新获取`;
            
            if (countdown <= 0) {
                resetSendCodeButton();
            }
        }, 1000);
    }
    
    function togglePasswordVisibility(inputElement, toggleElement) {
        const type = inputElement.getAttribute('type') === 'password' ? 'text' : 'password';
        inputElement.setAttribute('type', type);
        
        // 切换图标
        toggleElement.querySelector('i').classList.toggle('fa-eye');
        toggleElement.querySelector('i').classList.toggle('fa-eye-slash');
    }
    
    function goToStep(step) {
        // 隐藏所有步骤
        step1.classList.add('hidden');
        step2.classList.add('hidden');
        step3.classList.add('hidden');
        
        // 重置所有指示器
        step1Indicator.classList.remove('bg-blue-500', 'text-white', 'bg-green-500');
        step2Indicator.classList.remove('bg-blue-500', 'text-white', 'bg-green-500');
        step3Indicator.classList.remove('bg-blue-500', 'text-white', 'bg-green-500');
        
        step1Indicator.classList.add('bg-gray-300', 'text-gray-600');
        step2Indicator.classList.add('bg-gray-300', 'text-gray-600');
        step3Indicator.classList.add('bg-gray-300', 'text-gray-600');
        
        // 显示当前步骤
        if (step === 1) {
            step1.classList.remove('hidden');
            step1Indicator.classList.remove('bg-gray-300', 'text-gray-600');
            step1Indicator.classList.add('bg-blue-500', 'text-white');
        } else if (step === 2) {
            step2.classList.remove('hidden');
            step1Indicator.classList.remove('bg-gray-300', 'text-gray-600');
            step1Indicator.classList.add('bg-green-500', 'text-white');
            step2Indicator.classList.remove('bg-gray-300', 'text-gray-600');
            step2Indicator.classList.add('bg-blue-500', 'text-white');
        } else if (step === 3) {
            step3.classList.remove('hidden');
            step1Indicator.classList.remove('bg-gray-300', 'text-gray-600');
            step1Indicator.classList.add('bg-green-500', 'text-white');
            step2Indicator.classList.remove('bg-gray-300', 'text-gray-600');
            step2Indicator.classList.add('bg-green-500', 'text-white');
            step3Indicator.classList.remove('bg-gray-300', 'text-gray-600');
            step3Indicator.classList.add('bg-green-500', 'text-white');
        }
    }
    
    function checkPasswordStrength() {
        const password = newPasswordInput.value;
        const strengthSegments = document.querySelectorAll('.strength-segment');
        const strengthText = document.querySelector('.password-strength-text');
        
        // 重置所有强度段
        strengthSegments.forEach(segment => {
            segment.className = 'strength-segment bg-gray-300 flex-1 mr-1 rounded-full';
        });
        
        // 计算密码强度
        let strength = 0;
        
        // 长度检查
        if (password.length >= 8) {
            strength += 1;
        }
        
        // 包含数字
        if (/\d/.test(password)) {
            strength += 1;
        }
        
        // 包含小写字母
        if (/[a-z]/.test(password)) {
            strength += 1;
        }
        
        // 包含大写字母或特殊字符
        if (/[A-Z]/.test(password) || /[^A-Za-z0-9]/.test(password)) {
            strength += 1;
        }
        
        // 更新UI
        for (let i = 0; i < strength; i++) {
            if (strengthSegments[i]) {
                if (strength === 1) {
                    strengthSegments[i].classList.add('bg-red-500');
                } else if (strength === 2) {
                    strengthSegments[i].classList.add('bg-yellow-500');
                } else if (strength === 3) {
                    strengthSegments[i].classList.add('bg-blue-500');
                } else if (strength === 4) {
                    strengthSegments[i].classList.add('bg-green-500');
                }
            }
        }
        
        // 更新强度文本
        if (strength === 0) {
            strengthText.textContent = '密码强度: 请输入密码';
            strengthText.className = 'text-xs text-gray-500 password-strength-text';
        } else if (strength === 1) {
            strengthText.textContent = '密码强度: 弱';
            strengthText.className = 'text-xs text-red-500 password-strength-text';
        } else if (strength === 2) {
            strengthText.textContent = '密码强度: 一般';
            strengthText.className = 'text-xs text-yellow-500 password-strength-text';
        } else if (strength === 3) {
            strengthText.textContent = '密码强度: 中等';
            strengthText.className = 'text-xs text-blue-500 password-strength-text';
        } else {
            strengthText.textContent = '密码强度: 强';
            strengthText.className = 'text-xs text-green-500 password-strength-text';
        }
    }
</script>
</body>
</html> 